interface MessageBoxOptions {
  visible: boolean
  title: string
  type: string
  content: string | JSX.Element
  confirmText?: string
  cancelText?: string
  showCancelButton?: boolean
  showConfirmIcon?: boolean
  showWarningIcon?: boolean
  confirmIcon?: string
  isScroll?: boolean //内容区是否滚动
  closeOnModal?: boolean
  closeOnEscape?: boolean
  loading?: boolean
  confirm?: PromiseFn | (() => void)
  cancel?: PromiseFn | (() => void)
}

const initState: MessageBoxOptions = {
  visible: false,
  title: useI18nContent('common.toast.operation_prompt'),
  type: 'primary',
  content: '',
  confirmText: useI18nContent('common.button.confirm'),
  cancelText: useI18nContent('common.button.cancel'),
  showCancelButton: true,
  showConfirmIcon: false,
  confirmIcon: 'jump',
  showWarningIcon: true, //是否展示警告icon
  isScroll: false,
  closeOnModal: false,
  closeOnEscape: false,
  loading: false
}

const state = reactive<MessageBoxOptions>({
  ...initState
})

export default function useMessageBox() {
  function setMessageBox(options: Partial<MessageBoxOptions>) {
    if (typeof options.visible === 'undefined') {
      options.visible = true
    }
    for (const key in options) {
      Reflect.set(state, key, options[key])
    }
  }

  function reset() {
    for (const key in initState) {
      state[key] = initState[key]
    }
  }

  // 隐藏后，重置参数
  watch(
    () => state.visible,
    () => {
      if (state.visible) {
        return
      }
      setTimeout(reset, 500)
    }
  )

  return {
    state,
    setMessageBox
  }
}
